import { computed, defineComponent, ref } from 'vue';
import LindadayoVideoPlayer from '../main';
import { VideoConfig } from '@/types/JSX';

export default defineComponent({
  setup() {
    const config: VideoConfig = {
      width: '700px',
      height: '400px',
      volume: 0.5,
      loop: true,
      poster: 'https://images.linpeng.com/book/1446182657159_31.jpg',
      download: false,
      marginControls: true,
      seekedStatus: 'pause',
      defaultLevel: '标清',
      hls: {
        preloadTime: 1000,
        bufferBehind: 2000
      }
    }
    const definitionList = [
      // {
      //   url: 'https://1251672659.vod2.myqcloud.com/4d190af3vodtransgzp1251672659/bf37d5e3387702304108515017/v.f1024175.m3u8?t=6560edea&sign=46c222937b32a7879d0ebe82c26486cb',
      //   name: '高清'
      // }
      {
        url: 'https://1251672659.vod2.myqcloud.com/4d190af3vodtransgzp1251672659/b1c2ed748602268010514330284/v.f1020548.m3u8?t=656898ab&sign=575eb2df80ab5e9cb713fc1e1143f3e7',
        name: '超清'
      },
      {
        url: 'https://1251672659.vod2.myqcloud.com/4d190af3vodtransgzp1251672659/b1c2ed748602268010514330284/v.f1020549.m3u8?t=656898ab&sign=575eb2df80ab5e9cb713fc1e1143f3e7',
        name: '高清'
      },
      {
        url: 'https://1251672659.vod2.myqcloud.com/4d190af3vodtransgzp1251672659/b1c2ed748602268010514330284/v.f1024175.m3u8?t=656898ab&sign=575eb2df80ab5e9cb713fc1e1143f3e7',
        name: '标清'
      }
    ]
    const player = ref(null)
    const currentTime = ref<string>('00:00.00')
    const keyword = ref<string>('')
    const transferTime = computed({
      get() {
        return currentTime.value
      },
      set(val: string) {
        currentTime.value = val
      }
    })
    const methods = {
      eventControl(e) {
        const {
          eventName,
          eventValue
        } = e
        // console.log(eventName, eventValue);
        switch (eventName) {
          case 'timeupdate':
            currentTime.value = methods.newSecondToHour(eventValue.currentTime.toFixed(2))
            break;
        }
      },
      getPlayer(obj) {
        player.value = obj
      },
      /**
       * 失焦
       */
      onBlur() {
        methods.seek()
      },
      /**
       * 跳转到指定时间点
       */
      seek() {
        const {
          status,
          time
        } = methods.newTranslateToSecond(currentTime.value)
        status && player.value.seek(time)
      },
      /**
       * 视频播放暂停控制
       */
      playerControl() {
        if (player.value.paused) {
          player.value.play()
        } else {
          player.value.pause()
        }
      },
      /**
       * 秒（精确到百分秒） 转 时分秒
       * @param second {string} '65.32'
       * @returns {string} '01:05.32'
       * @constructor
       */
      newSecondToHour(second) {
        second = second + '';
        let t;
        const point = '.' + String(second).split('.')[1]
        if (second > -1) {
          const hour = Math.floor(second / 3600);
          const min = Math.floor(second / 60) % 60;
          const sec = Math.floor(second % 60);
          if (hour === 0) {
            t = '';
          } else if (hour < 10) {
            t = '0' + hour + ':';
          } else {
            t = hour + ':';
          }
          if (min < 10) { t += '0'; }
          t += min + ':';
          if (sec < 10) { t += '0'; }
          t += sec;
        }
        return t + point;
      },
      /**
      * 时分秒转化为秒 保留百分秒
      * @param time('01:05.32')
      * @returns {number} '65.32'
      */
      newTranslateToSecond(times) {
        try {
          const timeArr = times.split(':');
          const min = Number(timeArr[0])
          const sec = Number(timeArr[1].split('.')[0])
          const mill = Number(timeArr[1].split('.')[1])
          return {
            status: true,
            time: (min * 60 + sec) + '.' + mill
          }
        } catch (_e) {
          return {
            status: false,
            time: 0
          }
        }
      },
      /**
       * 视频地址赋值
       */
      importVideo() {
        definitionList[0].url = keyword.value
      }
    }
    return () => (
      <div>
        <div
          style={{
            marginBottom: '10px'
          }}
        >
        <el-input
          style={{
            width: '400px'
          }}
          vModel_trim={keyword.value}
          size='mini'
          clearable
          placeholder='视频url'
        />
        <el-button
          size='mini'
          type='primary'
          style={{
            marginLeft: '10px'
          }}
          onClick={methods.importVideo}
        >
          视频url赋值
        </el-button>
      </div>
        <LindadayoVideoPlayer
          config={config}
          definition-list={definitionList}
          on-get-player={methods.getPlayer}
          on-event={methods.eventControl}
        />
        <div style={{
          marginTop: '20px'
        }}>
          当前时间点：
          <el-input
            style={{
              width: '120px'
            }}
            disabled={!player.value?.paused}
            v-model={transferTime.value}
            on-blur={methods.onBlur}
          />
          <el-button
            onClick={methods.playerControl}
            style={{
              marginLeft: '10px'
            }}
          >
            {
              player.value?.paused ? '播放' : '暂停'
            }
          </el-button>
        </div>
      </div>
    )
  }
})
